<template>
  <div class="dispatch-detail">
    <div class="main" v-loading="loading">
      <div class="top">
        <el-row type="flex" align="center">
          <el-col :span="6">
            <div style="display: flex">
              <div class="icon">细</div>
              <div>
                <h3>
                  细纱<el-tag
                    size="mini"
                    class="table-tag"
                    style="margin-left: 15px"
                    >{{ search.bc }}</el-tag
                  >
                </h3>
                <div><span class="label">排班编号：</span></div>
              </div>
            </div>
          </el-col>
          <el-col :span="6"
            ><div class="mb10" style="margin-top: 3px">
              <span class="label">组织：</span>{{ search.org }}
            </div>
            <div><span class="label">车间：</span>{{ search.cj }}</div></el-col
          >
          <el-col :span="6"
            ><div class="mb10" style="margin-top: 3px">
              <span class="label">时间：</span>{{ date }}
            </div>
            <div><span class="label">工种：</span></div></el-col
          >
          <el-col :span="6"
            ><div class="mb10" style="margin-top: 3px">
              <span class="label">班长：</span>{{ basic.monitor }}
            </div>
            <div>
              <span class="label">班教：</span>{{ basic.classCoach }}
            </div></el-col
          >
          <div class="date">
            <h2>{{ day }}</h2>
            <p>{{ month }}</p>
            <el-date-picker
              class="virtual-datepicker"
              v-model="date"
              type="date"
              value-format="yyyy-MM-dd"
              :clearable="false"
              @change="changeDate"
            >
            </el-date-picker>
          </div>
        </el-row>
      </div>
      <el-row type="flex" justify="space-between" style="margin: 15px 0 10px">
        <div style="font-size: 16px; font-weight: 500; color: #48556a">
          班次人员
        </div>
        <div>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="addPerson"
            >添加人员</el-button
          >
          <el-button class="border-btn" size="small" @click="getYesterday"
            >复制昨日排班</el-button
          >
          <el-button
            v-if="false"
            class="border-btn"
            size="small"
            @click="$emit('copyTemplate', '细纱', date)"
            >复制到模板</el-button
          >
          <el-button
            class="danger-btn"
            type="danger"
            size="small"
            @click="$emit('delAll', '细纱', date)"
            >一键删除</el-button
          >
          <el-button size="small">导出排班表</el-button>
        </div>
      </el-row>
      <div class="common-table">
        <!-- 表头 -->
        <l-table
          type="表头"
          class="fixed-header"
          :columns="columns"
          :search="search"
          :wtOption="wtOption"
          :tableData="[]"
          :showHeader="true"
          :spanMethod="false"
        />
        <div style="width: fit-content; min-width: calc(100% - 8px)">
          <!-- 细纱 -->
          <l-table
            type="挡车"
            :columns="columns"
            :search="search"
            :wtOption="wtOption"
            :date="date"
            :tableData="xiShaTable"
            :showHeader="false"
            :spanMethod="false"
          ></l-table>
          <!------------------------------- 落纱 -------------------------->
          <div class="middle-line" v-if="luoShaTable.length > 0">
            <el-row type="flex" align="middle">
              <el-col :span="8" style="border-right: 1px solid #ebeef5">
                <span style="font-size: 15px">落纱次数：</span>
                <el-button
                  type="text"
                  size="small"
                  style="color: #1790ff"
                  @click="openDialog('lcs', '0')"
                  >落纱次数明细<i class="el-icon-arrow-right"/></el-button
              ></el-col>
              <el-col :span="8">
                <el-row type="flex" align="middle" :gutter="20">
                  <span style="font-size: 15px">换粗纱总锭数：</span>
                  <div class="count-input">
                    <el-input size="small" v-model="hcsSum" disabled>
                      <template #append>锭</template></el-input
                    >
                  </div>
                  <el-button
                    type="text"
                    size="small"
                    style="margin-left: 16px; color: #1790ff"
                    @click="openDialog('hcs', '0')"
                    >换粗纱明细<i
                      class="el-icon-arrow-right"/></el-button></el-row
              ></el-col>
            </el-row>
          </div>
          <div v-for="(item, index) in luoShaTable" :key="index">
            <l-table
              type="落纱"
              :columns="columns"
              :search="search"
              :wtOption="wtOption"
              :date="date"
              :tableData="item"
              :showHeader="false"
              :spanMethod="true"
            ></l-table>
          </div>
          <!-- 推粗砂工 -->
          <l-table
            type="推粗纱"
            :columns="columns"
            :search="search"
            :date="date"
            :tableData="tuiCuShaTable"
            :wtOption="wtOption"
            :showHeader="false"
            :spanMethod="true"
          ></l-table>
          <!-- 清洁工 -->
          <l-table
            type="清洁"
            :columns="columns"
            :search="search"
            :date="date"
            :tableData="qingJieTable"
            :wtOption="wtOption"
            :showHeader="false"
            :spanMethod="true"
          ></l-table>
          <!-- 摆管工 -->
          <l-table
            type="摆管"
            :columns="columns"
            :search="search"
            :date="date"
            :tableData="baiGuanTable"
            :wtOption="wtOption"
            :showHeader="false"
            :spanMethod="true"
          ></l-table>
          <!--------------------------------  data3 ----------------------------------->
          <!-- 细纱 -->
          <l-table
            type="挡车"
            :columns="columns"
            :search="search"
            :wtOption="wtOption"
            :date="date"
            :tableData="xiShaTable3"
            :showHeader="false"
            :spanMethod="false"
          ></l-table>
          <!------------------------------- 落纱 -------------------------->
          <div class="middle-line" v-if="luoShaTable3.length > 0">
            <el-row type="flex" align="middle">
              <el-col :span="8" style="border-right: 1px solid #ebeef5">
                <span style="font-size: 15px">落纱次数：</span>
                <el-button
                  type="text"
                  size="small"
                  style="color: #1790ff"
                  @click="openDialog('lcs', '1')"
                  >落纱次数明细<i class="el-icon-arrow-right"/></el-button
              ></el-col>
              <el-col :span="8">
                <el-row type="flex" align="middle" :gutter="20">
                  <span style="font-size: 15px">换粗纱总锭数：</span>
                  <div class="count-input">
                    <el-input size="small" v-model="hcsSum3" disabled>
                      <template #append>锭</template></el-input
                    >
                  </div>
                  <el-button
                    type="text"
                    size="small"
                    style="margin-left: 16px; color: #1790ff"
                    @click="openDialog('hcs', '1')"
                    >换粗纱明细<i
                      class="el-icon-arrow-right"/></el-button></el-row
              ></el-col>
            </el-row>
          </div>
          <div v-for="(item, index) in luoShaTable3" :key="index + '3'">
            <l-table
              type="落纱"
              :columns="columns"
              :search="search"
              :wtOption="wtOption"
              :date="date"
              :tableData="item"
              :showHeader="false"
              :spanMethod="true"
            ></l-table>
          </div>
          <!-- 推粗砂工 -->
          <l-table
            type="推粗纱"
            :columns="columns"
            :search="search"
            :date="date"
            :tableData="tuiCuShaTable3"
            :wtOption="wtOption"
            :showHeader="false"
            :spanMethod="true"
          ></l-table>
          <!-- 清洁工 -->
          <l-table
            type="清洁"
            :columns="columns"
            :search="search"
            :date="date"
            :tableData="qingJieTable3"
            :wtOption="wtOption"
            :showHeader="false"
            :spanMethod="true"
          ></l-table>
          <!-- 摆管工 -->
          <l-table
            type="摆管"
            :columns="columns"
            :search="search"
            :date="date"
            :tableData="baiGuanTable3"
            :wtOption="wtOption"
            :showHeader="false"
            :spanMethod="true"
          ></l-table>
          <!------------------------------- 落纱 -------------------------->
          <template v-if="false">
            <div class="middle-line">
              <el-row type="flex" align="middle">
                <span style="font-size: 15px">推粗纱（粗纱机台）：</span>
                <div>#1~#6、；</div>
                <div class="add-btn">+</div></el-row
              >
            </div>
            <!-- 推粗砂工2 -->
          </template>
        </div>
      </div>
      <l-dialog />
      <hcs-dialog ref="hcsDialog" @getData="getCsDs" />
      <lcs-dialog ref="lcsDialog" :pzOption="pzOption" />
      <add-dialog
        ref="addDialog"
        :date="date"
        :query="search"
        @getData="getSchedule"
      ></add-dialog>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import addDialog from './add.vue';
import lTable from './table.vue';
import lDialog from './dialog.vue';
import hcsDialog from './hcsDialog.vue';
import lcsDialog from './lcsDialog.vue';
import {
  getSchedule,
  yesterdaySchedule,
  getMonitor,
  getCsDs
} from '@/api/dispatch';
import { getSysDict, commonPz } from '@/api/common.js';
export default {
  props: {
    // 搜索条件
    search: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  components: { addDialog, lTable, lDialog, hcsDialog, lcsDialog },
  data() {
    return {
      basic: '',
      date: '',
      day: '',
      month: '',
      columns: [],
      pzOption: [],
      wtOption: [],
      xiShaTable: [],
      luoShaTable: [],
      lscsTable: [],
      hcsTable: [],
      hcsSource: [],
      baiGuanTable: [],
      tuiCuShaTable: [],
      qingJieTable: [{ kqzt: 1, bz: '清洁工' }],
      hcsSum: 0,
      hcsSum3: 0,
      xiShaTable3: [],
      luoShaTable3: [],
      lscsTable3: [],
      hcsTable3: [],
      hcsSource3: [],
      baiGuanTable3: [],
      tuiCuShaTable3: [],
      qingJieTable3: [{ kqzt: 1, bz: '清洁工' }],
      loadingCount: 0
    };
  },
  computed: {
    loading() {
      return this.loadingCount !== 0;
    }
  },
  created() {
    this.date = moment().format('YYYY-MM-DD');
    this.month = moment(this.date)
      .locale('zh-cn')
      .format('MMMM');
    this.day = moment(this.date).format('DD');
    this.getWorkOption();
    this.getPz();
  },
  methods: {
    getSchedule() {
      this.getMonitor();
      const column = ['挡车工', '落纱工', '摆管工', '推粗纱工', '清洁工'];
      column.map(item => {
        this.getData(item);
      });
    },
    async getData(workType) {
      if (workType.indexOf('落纱') > -1) {
        this.loadingCount++;
        this.luoShaTable = [];
        this.luoShaTable3 = [];
        let params = {
          org: this.search.org,
          cj: this.search.cj,
          bc: this.search.bc,
          current_gongxu: '细纱',
          current_work_type: '落纱',
          time: this.date
        };
        const res = await getSchedule(params);
        if (res.code == 1) {
          let data = res.data;
          this.getCsDs();
          this.luoShaTable = this.formatterArr(data, 'current_dh');
          this.luoShaTable3 = this.formatterArr(res.data3, 'current_dh');
          if (this.luoShaTable3.length > 0) {
            this.getCsDs('1');
          }
          this.loadingCount--;
        }
      } else {
        this.loadingCount++;
        let params = {
          org: this.search.org,
          cj: this.search.cj,
          bc: this.search.bc,
          current_gongxu: '细纱',
          current_work_type: workType,
          time: this.date
        };
        const res = await getSchedule(params);
        if (res.code == 1) {
          // 表头
          let columns = [];
          for (let i = 0; i < res.data2.length; i++) {
            let obj = {
              name: res.data2[i][Object.keys(res.data2[i])[0]],
              params: Object.keys(res.data2[i])[0],
              sjkt: res.data2[i].sjkt,
              jhkt: res.data2[i].jhkt,
              sykt: res.data2[i].sykt
            };
            columns.push(obj);
          }
          this.columns = columns;
          this.$nextTick(() => {
            // 数据
            let data = res.data;
            let table = this.switchTable(workType);
            this[table] = data;
            this[table + '3'] = res.data3;
            this.loadingCount--;
          });
        }
      }
    },
    async getMonitor() {
      let params = {
        org: this.search.org,
        cj: this.search.cj,
        bc: this.search.bc,
        gongxu: '细纱',
        time: this.date
      };
      const res = await getMonitor(params);
      if (res.code == 1) {
        this.basic = res.data || {};
      }
    },
    async getYesterday() {
      let params = {
        org: this.search.org,
        cj: this.search.cj,
        bc: this.search.bc,
        gongxu: '细纱',
        time: this.date
      };
      const res = await yesterdaySchedule(params);
      if (res.code == 1) {
        this.getSchedule();
      }
    },
    async getWorkOption() {
      let workType = 'workType_xs';
      const res = await getSysDict(workType);
      if (res.code == 1) {
        this.wtOption = res.data.dataList;
      }
    },
    async getPz() {
      const res = await commonPz('细纱');
      if (res.code == 1) {
        this.pzOption = res.data;
      }
    },
    // 查询换粗砂总ds
    async getCsDs(sameBcFlag = '0') {
      let params2 = {
        bc: this.search.bc,
        cj: this.search.cj,
        gongxu: '细纱',
        org: this.search.org,
        sameBcFlag: sameBcFlag,
        time: this.date
      };
      const res2 = await getCsDs(params2);
      if (res2.code == 1) {
        let data2 = res2.data;
        let param = sameBcFlag == '1' ? 'hcsSum3' : 'hcsSum';
        this[param] = data2['sum'][0] ? data2['sum'][0]['hcsds_sum'] : 0;
      }
    },
    openDialog(ref, sameBcFlag) {
      this.$refs[ref + 'Dialog'].show(this.search, this.date, sameBcFlag);
    },
    switchTable(val) {
      let table = '';
      switch (val) {
        case '挡车工':
          table = 'xiShaTable';
          break;
        case '落纱工':
          table = 'luoShaTable';
          break;
        case '摆管工':
          table = 'baiGuanTable';
          break;
        case '推粗纱工':
          table = 'tuiCuShaTable';
          break;
        case '清洁工':
          table = 'qingJieTable';
          break;
      }
      return table;
    },
    addPerson() {
      this.$refs.addDialog.show();
    },
    formatterArr(arr, group_key) {
      let map = {};
      let res = [];
      for (let i = 0; i < arr.length; i++) {
        let ai = arr[i];
        if (!map[ai[group_key]]) {
          map[ai[group_key]] = [ai];
        } else {
          map[ai[group_key]].push(ai);
        }
      }
      Object.keys(map).forEach(key => {
        res.push(map[key]);
      });
      return res;
    },
    changeDate(val) {
      this.month = moment(val)
        .locale('zh-cn')
        .format('MMMM');
      this.day = moment(val).format('DD');
      this.getSchedule();
    }
  }
};
</script>

<style lang="scss" scoped>
.common-table {
  overflow: auto;
  border-right: 1px solid #ebeef5;
}
</style>
